<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产过程管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/layui.css" rel="stylesheet">
	<link href="../css/style.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">生产任务管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('edit');">生产任务下达</a></dd>
                        <dd><a href="javascript:goPage('list');">生产任务查看</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">产品型号管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">产品管理</a></dd>
                        <dd><a href="javascript:;">产品编辑</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:">更多菜单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">----</a></dd>
                        <dd><a href="javascript:;">----</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="">工作任务</a>
                  <a><cite>工作任务管理</cite></a>
                </span>
            </blockquote>

            <!-- 查询条件表单  -->
            <form class="layui-form layui-row layui-col-space16" action="<%=request.getContextPath()%>/task/list">
                <div class="layui-col-md3">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="prod_no"  placeholder="产品图号" class="layui-input" lay-affix="clear" value="">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" id="task_start" name="task_start" readonly placeholder="任务起始时间" class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" id="task_end" name="task_end" readonly placeholder="任务结束时间" class="layui-input demo-table-search-date">
                    </div>
                </div>
				<div class="layui-col-md3">
				    <div class="layui-input-wrap">
				        <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
						<a href="javascript:void(0)" id="btn_task_add" class="layui-btn layui-bg-blue">下达任务</a>
				    </div>
				</div>
            </form>
            <!--
                列表展示
            -->
            <table class="layui-table" id="task-table-search"></table>
            

        </div>
    </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2024 &copy; 
    </p>
</div>


</body>

<div id="editBox" style="display: none;">
	<form class="layui-form" lay-filter='task-form' action="#">
	    <div class="layui-form-item">
	        <label class="layui-form-label width120">任务编号 </label>
	        <div class="layui-input-inline">
	            <input type="text" name="task_no" lay-verify="required" readonly="readonly" autocomplete="off" class="layui-input">
	        </div>
	    </div>
		<div class="layui-form-item">
	        <label class="layui-form-label width120">产品图号 </label>
	        <div class="layui-input-inline">
	            <input type="text" name="prod_no" lay-verify="required" placeholder="请输入产品图号" autocomplete="off" class="layui-input">
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width120">计划件数</label>
	            <div class="layui-input-inline" style="width: 100px;">
	                <input type="number" name="plan_num" placeholder="" autocomplete="off" class="layui-input" min="1" step="1" lay-affix="number">
	            </div>
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width120">任务启动时间</label>
	            <div class="layui-input-inline layui-input-wrap">
	                <div class="layui-input-prefix">
	                    <i class="layui-icon layui-icon-date"></i>
	                </div>
	                <input type="text" name="edit_task_start" id="edit_task_start" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
	            </div>
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width120">任务结束时间</label>
	            <div class="layui-input-inline layui-input-wrap">
	                <div class="layui-input-prefix">
	                    <i class="layui-icon layui-icon-date"></i>
	                </div>
	                <input type="text" name="edit_task_end" id="edit_task_end" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
	            </div>
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-inline">
	            <label class="layui-form-label width120">任务责任人</label>
	            <div class="layui-input-inline">
	                <select name="task_person" lay-verify="required" lay-search>
	                    <option value="">直接选择或搜索选择</option>
	                    <option >张三</option>
	                    <option >李四</option>
	                    <option >王五</option>
	                    <option >赵六</option>
	                    <option >严七</option>
	                    <option >胡八</option>
	                </select>
	            </div>
	        </div>
	    </div>
	    <div class="layui-form-item">
	        <div class="layui-input-block">
	            <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
	            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	        </div>
	    </div>
	</form>
</div>

<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
	<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
  </div>
</script>  
<script type="text/javascript" src="../js/layui.js"></script>
<script>
layui.use( function(){
	var laydate = layui.laydate;
	var dropdown = layui.dropdown;
	var $ = layui.$;
	var layer = layui.layer;
	var util = layui.util;
	var table = layui.table;
	var form = layui.form;	
	
	// 渲染
	laydate.render({
	    elem: '#task_start'
	});
	laydate.render({
	    elem: '#task_end'
	});
	

	// 创建表格实例
	let mainTable = table.render({
		id: 'test1',
		elem: '#task-table-search',
		url: 'http://localhost:8888/listTask', // 此处为静态模拟数据，实际使用时需换成真实接口
		method: 'post',
		headers: {'Access-Control-Allow-Origin': '*'},
		cols: [[
			
		  {type: 'checkbox', title: '', fixed: true}, // 单选框
		  {field:'id', title: 'ID', width:80, sort: true, fixed: true},
		  {field:'taskNo', title: '编号', minWidth:200},
		  {field:'prodNo', title: '产品图号', minWidth:150, sort: true},
		  {field:'planNum', title: '计划件数', width:120},
		  {field:'taskStart', title: '启动时间', minWidth: 120},
		  {field:'taskEnd', title: '结束时间', minWidth: 120},
		  {field:'taskPerson', title: '负责人', sort: true, width:120},
		  {fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
		]],
		
		page: true,
		height: 'full'
	});
	
	// 触发单元格工具事件
	table.on('tool(test1)', function(obj){ // 双击 toolDouble
	    var rowData = obj.data; // 获得当前行数据
	    
		// 修改按钮的处理
	    if(obj.event === 'update'){
			let editBox = layer.open({
				title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>任务信息编辑</b> 
					  </button>
				`,
				type: 1,
				area: ['600px','500px'],
				content: $('#editBox').html(),
				success: function(){
				  // 对弹层中的表单进行初始化渲染
				  form.render();
				  // 表单提交事件
				  form.on('submit(form-submit)', function(data){
				    var field = data.field; // 获取表单字段值
				    // 显示填写结果，仅作演示用
				    // layer.alert(JSON.stringify(field), {
				    //   title: '当前填写的字段值'
				    // });
				    // 此处可执行 Ajax 等操作
				    // var data = layui.form.val('task-form');
					console.log(field)
					$.ajax({
						url: "http://localhost:8888/saveTask",
						type: "post",
						headers: {'Access-Control-Allow-Origin': '*'},
						// datatype: "json",
						data: {
							id: rowData.id,
							taskNo: field.task_no,
							prodNo: field.prod_no,
							taskStart: field.edit_task_start,
							taskEnd: field.edit_task_end,
							taskPerson: field.task_person,
							planNum: field.plan_num
						},
						success: function (e) {
							layer.msg('操作成功！');
							// console.log(e);
							layer.close(editBox);   // 关闭对话框
							mainTable.reload(); // 重新加载表格数据
						}
						
					});
				    return false; // 阻止默认 form 跳转
				  });
				}
			});
			laydate.render({
			    elem: '#edit_task_start'
			});
			laydate.render({
			    elem: '#edit_task_end'
			});
			
			//对表单元素进行赋值
			layui.form.val('task-form', {
				"id": rowData.id,
				"task_no": rowData.taskNo,
				"prod_no": rowData.prodNo,
				"plan_num": rowData.planNum,
				"edit_task_start": rowData.taskStart,
				"edit_task_end": rowData.taskEnd,
				"task_person": rowData.taskPerson
			});
			
		// 删除按钮的处理	
	    } else if(obj.event === 'delete'){
			layer.confirm('确定要删除该行数据吗？', function(index){
				$.ajax({
					url: "http://localhost:8888/delTask",
					type: "post",
					// datatype: "json",
					data: {
						id: rowData.id,
					},
					success: function (e) {
						layer.msg('操作成功！');
						// console.log(e);
						mainTable.reload(); // 重新加载表格数据
					}
				});
			});
	    }
	  });
	
	// 搜索提交
	form.on('submit(demo-table-search)', function(data){
	var field = data.field; // 获得表单字段
	// 执行搜索重载
	table.reload('test1', {
	  page: {
		curr: 1 // 重新从第 1 页开始
	  },
	  where: field // 搜索的字段
	});
	layer.msg('搜索成功<br>');
	return false; // 阻止默认 form 跳转
	});
	
	// 添加按钮的处理
	$('#btn_task_add').click(function(){
		editBox = layer.open({
			title: `<button type="button" class="layui-btn layui-bg-gray">
					<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>任务信息编辑</b> 
				  </button>
			`,
			type: 1,
			area: ['600px','500px'],
			content: $('#editBox').html(),
			success: function(){
			  // 对弹层中的表单进行初始化渲染
			  form.render();
			  // 表单提交事件
			  form.on('submit(form-submit)', function(data){
			    var field = data.field; // 获取表单字段值
			    // 显示填写结果，仅作演示用
			    // layer.alert(JSON.stringify(field), {
			    //   title: '当前填写的字段值'
			    // });
			    // 此处可执行 Ajax 等操作
			    var data = layui.form.val('task-form');
				$.ajax({
					url: "http://localhost:8888/saveTask",
					type: "post",
					headers: {'Access-Control-Allow-Origin': '*'},
					// datatype: "json",
					data: {
						taskNo: field.task_no,
						prodNo: field.prod_no,
						taskStart: field.edit_task_start,
						taskEnd: field.edit_task_end,
						taskPerson: field.task_person,
						planNum: field.plan_num
					},
					success: function (e) {
						layer.msg('操作成功！');
						// console.log(e);
						layer.close(editBox);   // 关闭对话框
						mainTable.reload(); // 重新加载表格数据
					}
					
				});
			    return false; // 阻止默认 form 跳转
			  });
			}
		});
		laydate.render({
		    elem: '#edit_task_start'
		});
		laydate.render({
		    elem: '#edit_task_end'
		});
		var data = {
			"id": 0,
			"planNum": 1,
			"taskNo": 'TE-F-023k3333'
		};
		//对表单元素进行赋值
		layui.form.val('task-form', {
			"id": data.id,
			"task_no": data.taskNo,
			"prod_no": data.prodNo,
			"plan_num": data.planNum,
			"edit_task_start": data.taskStart,
			"edit_task_end": data.taskEnd,
			"task_person": data.taskPerson
		});
	});

});
</script>
<script>
	
    function remove(id) {
        if (confirm("确定是否要删除？")) {
            window.location.href = '/task/delete?id=' + id;
        }
    }
    function goPage(url) {
        window.location.href = url;
    }
        
</script>
</html>